.fof-upload-file-list {
    .fof-upload-loading {
        font-size: 20px;
        text-align: center;

        .LoadingIndicator {
            margin-top: 8px;
        }
    }

    .fof-upload-empty {
        font-size: 20px;
        text-align: center;

        @media screen and (min-width: 769px) {
            padding: 40px 0;
        }

        .fof-upload-empty-icon {
            display: block;
            margin-bottom: 20px;
            font-size: 35px;
        }
    }

    ul {
        // See: https://css-tricks.com/a-grid-of-logos-in-squares/#2-css-grid-basics
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

        // Support for iOS 10.3-11.4
        grid-gap: 8px;

        gap: 8px;
        margin: 0;
        padding: 0;

        li {
            display: block;
            list-style-type: none;
            position: relative;

            margin: 0;
            padding: 0;

            // Make grid items square!
            &::before {
                content: "";
                padding-bottom: 100%;
                display: block;
            }
        }
    }

    .fof-file-delete {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 1;
        background-color: transparent;

        opacity: 0.4;
        transition: opacity 150ms ease-out, background-color 150ms ease-out;

        &:disabled {
            pointer-events: none;
        }

        &:hover,
        &:focus {
            opacity: 1;
            background-color: @control-bg;
        }
    }

    .fof-file {
        display: block;

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;

        border: none;
        outline: none;
        border-radius: @border-radius;
        overflow: hidden;

        padding: 0;
        margin: 0;

        background: @body-bg;
        background-position: center center;
        background-size: cover;

        overflow: hidden;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transition: box-shadow 150ms ease-in-out;

        &:disabled {
            cursor: not-allowed;
            pointer-events: none;

            // We handle opacity like this
            figure {
                .fof-file-icon,
                .fof-file-image-preview,
                .fof-file-name {
                    opacity: 0.25;
                }
            }
        }

        &:hover,
        &:focus {
            box-shadow: 0 2px 5px 1.5px rgba(0, 0, 0, 0.125);
        }

        figure {
            display: grid;
            grid-template-rows: 1fr auto;
            grid-template-columns: 1fr;
            justify-content: center;
            align-content: center;

            width: 100%;
            height: 100%;

            margin: 0;
            padding: 0;

            .fof-file-icon {
                grid-area: ~"1 / 1 / 3 / 1";
                font-size: 45px;

                // Centre icon within container
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .fof-file-loading {
                grid-area: ~"1 / 1 / 3 / 1";

                // Centre indicator within container
                display: flex;
                align-items: center;
                justify-content: center;
            }

            img.fof-file-image-preview {
                grid-area: ~"1 / 1 / 3 / 1";

                // Fixes rendering bug in Blink where different
                // elements treat fractional pixel values differently
                width: calc(100% + 1px);
                height: calc(100% + 1px);

                object-fit: scale-down;
            }

            figcaption.fof-file-name {
                grid-area: ~"2 / 1 / 3 / 1";

                padding: 10px;
                font-size: 13px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        &.fof-file-type-image {
            .fof-file-name {
                background: fade(@body-bg, 80%);
                color: @text-color;
            }
        }

        &.fof-file-selected {
            box-shadow: 0 0 0 3px fade(@primary-color, 60%);
        }
    }

    .fof-load-more-files {
        text-align: center;
        padding: 40px 20px 20px;
    }
}
